<template>
  <div class="stock">
    <span style="font-size: 18px">{{ title }}</span>
    <div
      style="
        background: #fff;
        border-radius: 8px;
        height: 82vh;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
      "
    >
      <div style="padding: 20px">
        <el-input
          v-model="state1"
          placeholder="请输入商品名称"
          style="width: 200px; margin-right: 10px"
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSelect()"
          >搜索</el-button
        >
        <el-button type="primary" plain @click="reset()">重置</el-button>
      </div>
      <div>
        <el-dialog
          title="修改数据"
          :visible.sync="dialogVisible"
          width="30%"
          center
        >
          <el-form
            ref="form"
            :model="form"
            style="
              width: 400px;
              display: flex;
              flex-wrap: wrap;
              flex-direction: row;
            "
          >
            <el-form-item label="商品id" class="form-item">
              <el-input v-model="form.id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="商品名称" class="form-item">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="描述" class="form-item">
              <el-input v-model="form.de"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" class="form-item">
              <el-input v-model="form.category"></el-input>
            </el-form-item>
            <el-form-item label="店铺名称" class="form-item">
              <el-input v-model="form.shop"></el-input>
            </el-form-item>
            <el-form-item label="店铺id" class="form-item">
              <el-input v-model="form.shopid"></el-input>
            </el-form-item>
            <el-form-item label="店铺地址" class="form-item">
              <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="库存数量" class="form-item">
              <el-input v-model="form.quantity"></el-input>
            </el-form-item>
            <el-form-item label="主图" class="form-item">
              <el-image
                :src="form.comimg"
                style="
                  width: 100px;
                  max-heigth: 100px;
                  display: block;
                  margin: 0 auto;
                "
              >
              </el-image>
              <el-upload
                class="upload-demo"
                ref="upload"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                :auto-upload="false"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >选取文件</el-button
                >
                <el-button
                  style="margin-left: 10px"
                  size="small"
                  type="success"
                  @click="submitUpload"
                  >上传到服务器</el-button
                >
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件,且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="edit()">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <div class="table">
        <el-table
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          style="width: 100%"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商品名称">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="所属店铺">
                  <span>{{ props.row.shop }}</span>
                </el-form-item>
                <el-form-item label="商品 ID">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="店铺 ID">
                  <span>{{ props.row.shopid }}</span>
                </el-form-item>
                <el-form-item label="商品分类">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="店铺地址">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
                <el-form-item label="商品描述">
                  <span>{{ props.row.de }}</span>
                </el-form-item>
                <el-form-item label="库存数量">
                  <span>{{ props.row.quantity }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="comimg" label="主图" width="180">
            <template slot-scope="scope">
              <el-image
                style="
                  width: 80px;
                  max-heigth: 80px;
                  display: block;
                  margin: 0 auto;
                "
                @click="enlarge(scope.row)"
                :src="scope.row.comimg"
                ><div slot="error" class="image-slot">没有图片</div></el-image
              >
            </template>
          </el-table-column>
          <el-table-column label="商品 ID" prop="id"> </el-table-column>
          <el-table-column label="商品名称" prop="name"> </el-table-column>
          <el-table-column label="描述" prop="de"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block" style="margin-top: 15px">
        <el-pagination
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
      <div class="enl">
        <el-dialog
          title="大图预览"
          :visible.sync="enl"
          width="45%"
        >
          <el-image
          :src="big_img"
          style="width:600px;max-height:600px;margin: 0 auto;display: block;border-radius: 4px;"
          ></el-image>
        </el-dialog>
      </div>
      <div v-loading.fullscreen.lock="fullscreenLoading"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "库存详细",
      dialogVisible: false,
      fullscreenLoading: true,
      form: [],
      pickerOptions: {
        //日期选择
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      currentPage: 1, //默认页
      pageSize: 4,
      tableData: [],
      restaurants: [],
      state1: "",
      fileList: [],
      big_img: "",
      enl: false
    };
  },
  methods: {
    selects() {
      this.$axios
        .get("http://43.142.118.44/backstorg/com.php", {})
        .then((res) => {
          this.tableData = res.data; //ok
          console.log(res.data);
          this.fullscreenLoading = false
        });
    },
    enlarge(row) {
      console.log(row);
      this.enl = true;
      this.big_img = row.comimg
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //搜索
    handleSelect() {
      if (this.state1 !== "") {
        this.$axios
          .get("http://43.142.118.44/backstorg/search.php", {
            params: {
              name: this.state1,
            },
          })
          .then((res) => {
            this.tableData = res.data;
            console.log(res.data);
          });
      } else {
        this.$message.error("请输入您要搜索的关键字");
      }
    },
    reset() {
      //重置表格
      this.selects(), (this.state1 = "");
    },
    //编辑
    handleEdit(row) {
      console.log(row);
      this.dialogVisible = true;
      this.form = row;
      console.log(this.form.id);
    },
    edit() {
      //确认修改
      this.$axios
        .get("http://43.142.118.44/backstorg/editcom.php", {
          params: {
            id: this.form.id,
            name: this.form.name,
            category: this.form.category,
            de: this.form.de,
            shop: this.form.shop,
            shopid: this.form.shopid,
            address: this.form.address,
            quantity: this.form.quantity,
            comimg: this.form.comimg,
          },
        })
        .then((res) => {
          console.log(res.data);
          console.log(this.form.de);
          if (res.data == true) {
            console.log(this.form);
            this.$message.success("修改成功");
            this.selects();
            this.dialogVisible = false;
          } else {
            this.$message.error("修改失败");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
    //删除
    handleDelete(row) {
      console.log(row.id);
      this.$confirm("确定要删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get(`http://43.142.118.44/backstorg/delcom.php?id=${row.id}`, {})
            .then((res) => {
              if (res.data == "true") {
                this.selects();
                this.$message.success("删除成功");
              } else {
                this.$message.error("服务器响应超时");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  },
  mounted() {
    this.selects();
  },
};
</script>
<style>
.stock {
  padding: 30px;
  background: #f0f2f5;
  height: 93vh;
  overflow-y: scroll;
}
.form-item {
  margin-left: 5px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.block {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
* {
  caret-color: rgba(0, 0, 0, 0);
}
</style>
